<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            border: 1px solid #cccccc;
            padding: 10px;
        }
        .box{
            border: 1px solid #cccccc;
            margin-left: 50px;
            padding: 10px;
        }
        p{
            padding-left: 20px;
        }
        input{
            margin-left: 20px;
        }
        .input-file{
            border: 1px solid #cccccc;
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .input-file > img{
            width: 100%;
            height: 100%;
        }
        .input-file > input{
            display: none;
        }
        .set{
            width: 150px;
            height: 150px;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>父组件范围</h3>
        <!-- 
            vue为组件提供的 自定义 v-model 的接口配置属性 model
            model 为组件特殊配置属性，用于定义和描述组件的 v-model 指令功能
            一个组件只能定义一个 v-model

            组件上的v-model 指令实际上完成两件事情
                1、拆解为属性绑定 v-bind:组件model定义prop属性名 = "绑定的变量"
                2、拆解为事件绑定 v-on:自定义事件名 相当于在当前组件的 _events 中增加一个自定义事件
        -->
        <input-file class="set" v-model="file1"></input-file>
        <input-file v-model="file2"></input-file>
        <input-file></input-file>
        <input-file></input-file>
        <input-file></input-file>

    </div>
</body>
<script type="text/x-template" id="inputfile">
    <label class="input-file">
        <img :src="path">
        <input type="file" @change="changeFile($event.target)">
    </label>
</script>
<script>
    Vue.component("input-file",{
        template:"#inputfile",
        // 为组件定义 v-model 指令的功能
        //      1、prop 用于定义 v-model 的取值：指向一个 props配置中的一个变量
        //      2、event 用于定义 v-model 绑定的事件：自定义的事件名称
        model:{
            prop:"file",
            event:"update:file"
        },
        props:["file"],
        data(){
            return {
                path:"./img/add.png"
            }
        },
        methods: {
            changeFile(dom){
                console.log(dom.files);
                let blobFile = window.URL.createObjectURL(dom.files[0]);
                console.log(blobFile);
                this.path = blobFile;
                console.log(this);
                this.$emit("update:file",dom.files[0])
            }
        },
    })

    new Vue({
        el:"#app",
        data:{
            file1:null,
            file2:null
        }
    })
</script>
</html>